﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery滚动条jscroll美化滚动条,自定义滚动条</title>
<style>
body {padding:10px 0 0px 0;
	margin:0;
	font-size:12px;
	color:#666666;
	line-height:20px;
}
p.text {
	padding:10px;
	margin:10px;
	background:#f5f5f5;
	border:1px solid #ccc;
}
.fontRed {
	color:#FF0000
}
.title {
	font-family:Verdana, Arial;
	font-weight:bold;
	font-size:14px;
	padding:0 20px
}
.demo {
	width:500px;
	margin:30px;
	font-size:12px;
	padding:1px;
	border:1px solid #ccc;
}
.demo2 {
	border:1px solid #ccc;
	padding:1px;
	background:#fff;
	width:700px;
	margin:20px;
}
.logo h1, .footer h1 {
	height:1px;
	overflow:hidden;
	padding:0;
	margin:0;
	line-height:20px;
	font-size:12px;
	display:block
}
.footer {
	border-top:1px dotted #ccc;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background:#efefef
}
.footer .copyRight {
	padding:20px;
	font-size:11px;
}
.footer .copyRight p a {
	text-decoration:none;
}
pre.text {
	padding:10px;
	margin:10px;
	background:#f5f5f5;
	border:1px solid #ccc;
}
.img {
	border:1px solid #efefef;
	padding:1px;
	background:#fff;
	width:99px;
	margin:0 0 0 20px
}
#tt, #cc, #ee {
	background:#f5f5f5;
	height:100px;
}
.download {
	font-size:18px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	padding:20px
}
</style>
<script language='javascript' src='jquery.js'></script>
<script language='javascript' src='jscroll.js'></script>
<script type="text/javascript">
$(document).ready(function(){	

$(".hh").jscroll({ W:"9px"
					,BgUrl:"url(2.jpg)"
					,Bg:"left 0 repeat-y"
					,Bar:{Bd:{Out:"#bcbcbc",Hover:"#ccc"}
						 ,Bg:{Out:"-9px 0 repeat-y",Hover:"-9px 0 repeat-y",Focus:"-18px 0 repeat-y"}}
					,Btn:{btn:false
						 ,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}
						 ,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}
					,Fn:function(){}
					});


});
</script>
</head>

<body>
<div class="img"><img src="2.jpg" border="0" alt="所用图片" /></div>
<div class="demo2"  style="background:#ebebeb;">
  <div class="hh" style="height:200px;">
    <!--padding会被取消-->
    <div style="padding:5px">
      <!--padding这里设置-->

      <pre style="padding:0; margin:0; color:#b5b5b5; font-family:Verdana, Arial, Helvetica, sans-serif">$(".dd").jscroll({ W:"12px"//设置滚动条宽度
	,BgUrl:""//设置滚动条背景图片地址
	,Bg:"#ccc"//设置滚动条背景图片position,颜色等
	,Bar:{  Pos:"bottom"//设置滚动条初始化位置在底部
			,Bd:{Out:"#000",Hover:"red"}//设置滚动滚轴边框颜色：鼠标离开(默认)，经过
			,Bg:{Out:"green",Hover:"#fff",Focus:"orange"}}//设置滚动条滚轴背景：鼠标离开(默认)，经过，点击
	,Btn:{  btn:true//是否显示上下按钮 false为不显示
			,uBg:{Out:"black",Hover:"#fff",Focus:"orange"}//设置上按钮背景：鼠标离开(默认)，经过，点击
			,dBg:{Out:"black",Hover:"#fff",Focus:"orange"}}//设置下按钮背景：鼠标离开(默认)，经过，点击
	,Fn:function(){}//滚动时候触发的方法
	});
,BgUrl:""//设置滚动条背景图片地址
	,Bg:"#ccc"//设置滚动条背景图片position,颜色等
	,Bar:{  Pos:"bottom"//设置滚动条初始化位置在底部
			,Bd:{Out:"#000",Hover:"red"}//设置滚动滚轴边框颜色：鼠标离开(默认)，经过
			,Bg:{Out:"green",Hover:"#fff",Focus:"orange"}}//设置滚动条滚轴背景：鼠标离开(默认)，经过，点击
	,Btn:{  btn:true//是否显示上下按钮 false为不显示
			,uBg:{Out:"black",Hover:"#fff",Focus:"orange"}//设置上按钮背景：鼠标离开(默认)，经过，点击
			,dBg:{Out:"black",Hover:"#fff",Focus:"orange"}}//设置下按钮背景：鼠标离开(默认)，经过，点击
	,Fn:function(){}//滚动时候触发的方法
	});
,BgUrl:""//设置滚动条背景图片地址
	,Bg:"#ccc"//设置滚动条背景图片position,颜色等
	,Bar:{  Pos:"bottom"//设置滚动条初始化位置在底部
			,Bd:{Out:"#000",Hover:"red"}//设置滚动滚轴边框颜色：鼠标离开(默认)，经过
			,Bg:{Out:"green",Hover:"#fff",Focus:"orange"}}//设置滚动条滚轴背景：鼠标离开(默认)，经过，点击
	,Btn:{  btn:true//是否显示上下按钮 false为不显示
			,uBg:{Out:"black",Hover:"#fff",Focus:"orange"}//设置上按钮背景：鼠标离开(默认)，经过，点击
			,dBg:{Out:"black",Hover:"#fff",Focus:"orange"}}//设置下按钮背景：鼠标离开(默认)，经过，点击
	,Fn:function(){}//滚动时候触发的方法
	});
</pre>
    </div>
  </div>
</div>


<div class="download"><a href="jquery.js">下载-->jquery.js</a></div>

<div class="download"><a href="jscroll.js">下载-->jscroll.js(依赖于jquery.js)</a></div>
</body>
</html>
